<template>
  <div class="container">
    <div class="title">OMS用户绑定仓库</div>
    <div class="wrap">
      <el-row>
        <el-col :lg="16" :md="20" :sm="24" :xs="24">
          <el-form :model="form" status-icon ref="form" label-width="100px" @submit.native.prevent>
            <div class="box">
              <el-form-item label="仓库列表">
                <el-checkbox-group v-model="form.codes" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="item in arrUserList" :label="item.code" :key="item.code">{{
                    item.name
                  }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item class="submit">
                <el-button type="primary" @click="addAssociated('form')" :loading="loading">关联</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import omsuser from '@/model/omsuser'

export default {
  props: {
    viewWmsUserID: {
      type: Number,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        user_id: null,
        codes: [],
      },
      userWarehouseList: [],
      checkAll: false,
      isIndeterminate: true,
      arrUserList: [],
    }
  },
  created() {
    this.gitHaveWareList()
  },
  async mounted() {
    this.form.user_id = this.viewWmsUserID
    console.log(this.viewWmsUserID);
    this.gitWarehouseList(this.viewWmsUserID)

  },
  methods: {
    async gitHaveWareList() {
      //OMS用户拥有的的仓库
      const res = await omsuser.gitUserHave()
      console.log(res)
      this.arrUserList = res
    },
    async gitWarehouseList(id) {
      console.log(id);
      const res = await omsuser.gitWarehouse(id)
      console.log(res)
      let arr = []
      res.forEach((item) => {
        arr.push(item.code)
      })
      this.form.codes = arr
    },
    async warehouseBinding(e) {
      // 用户修改仓库
      const res = await omsuser.editWarehouseBinding(this.form)
      if (res.code < window.MAX_SUCCESS_CODE) {
        this.$message.success(`${res.message}`)
        this.$emit('editClose')
      }
    },
    addAssociated() {
      this.warehouseBinding()
    },
    group(e) {
      console.log(e)
    },
    handleCheckedCitiesChange(value) {
      console.log(value)
      const checkedCount = value.length
      this.checkAll = checkedCount === this.userWarehouseList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.userWarehouseList.length
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;
    border-bottom: 1px solid #dae1ec;
  }

  .wrap {
    padding: 20px;
  }

  .submit {
    float: left;
  }
}
.box {
  // display: flex;
}
</style>
